import { ToolCard } from '@/components/tool-card'
import { Button } from '@/components/ui/button'
import { Search, Code, Shuffle, Key, Type, FileText, TestTube, Link as LinkIcon, Palette, Clock, Copy, ArrowUpDown, Scissors, Eraser, AlignLeft, BarChart3, GitCompare } from 'lucide-react'
import Link from 'next/link'

// 所有可用工具
const allTools = [
  // MVP 核心工具
  {
    id: 'json-formatter',
    name: 'JSON 格式化',
    description: '美化和验证JSON数据，支持语法高亮和错误检测',
    category: '编程开发',
    icon: Code,
    href: '/tools/json-formatter'
  },
  {
    id: 'base64-converter',
    name: 'Base64 转换',
    description: '文本与Base64编码之间的双向转换工具',
    category: '转换格式',
    icon: Shuffle,
    href: '/tools/base64-converter'
  },
  {
    id: 'uuid-generator',
    name: 'UUID 生成器',
    description: '生成各种版本的UUID，支持批量生成',
    category: '生成器',
    icon: Key,
    href: '/tools/uuid-generator'
  },
  // 第二阶段工具
  {
    id: 'case-converter',
    name: '大小写转换',
    description: '在不同命名规范之间转换：camelCase、PascalCase、snake_case等',
    category: '文本处理',
    icon: Type,
    href: '/tools/case-converter'
  },
  {
    id: 'word-counter',
    name: '字数统计',
    description: '统计文本的字符数、单词数、句子数，预估阅读时间',
    category: '文本处理',
    icon: FileText,
    href: '/tools/word-counter'
  },
  {
    id: 'regex-tester',
    name: '正则表达式测试',
    description: '测试和验证正则表达式，支持实时匹配和高亮显示',
    category: '编程开发',
    icon: TestTube,
    href: '/tools/regex-tester'
  },
  {
    id: 'url-encoder',
    name: 'URL编码工具',
    description: 'URL编码和解码，支持组件编码和完整URL编码',
    category: '转换格式',
    icon: LinkIcon,
    href: '/tools/url-encoder'
  },
  {
    id: 'color-converter',
    name: '颜色转换',
    description: '在HEX、RGB、HSL等颜色格式之间进行转换',
    category: '设计工具',
    icon: Palette,
    href: '/tools/color-converter'
  },
  {
    id: 'timestamp-converter',
    name: '时间戳转换',
    description: '时间戳与日期时间之间的转换，支持多种时间格式',
    category: '转换格式',
    icon: Clock,
    href: '/tools/timestamp-converter'
  },
  // 测试工具
  {
    id: 'simple-test',
    name: '组件测试工具',
    description: '测试通用组件系统的简单工具',
    category: '实用工具',
    icon: TestTube,
    href: '/tools/simple-test'
  },
  {
    id: 'text-counter',
    name: '文本统计工具',
    description: '统计文本的字符数、单词数、行数等详细信息',
    category: '文本处理',
    icon: FileText,
    href: '/tools/text-counter'
  },
  {
    id: 'text-reverser',
    name: '文本反转工具',
    description: '支持字符、单词、行多种模式的文本反转',
    category: '文本处理',
    icon: Shuffle,
    href: '/tools/text-reverser'
  },
  {
    id: 'text-duplicator',
    name: '文本重复工具',
    description: '重复文本指定次数，支持多种分隔符和序号',
    category: '文本处理',
    icon: Copy,
    href: '/tools/text-duplicator'
  },
  {
    id: 'line-sorter',
    name: '行排序工具',
    description: '按字母、数字、长度等方式对文本行进行排序',
    category: '文本处理',
    icon: ArrowUpDown,
    href: '/tools/line-sorter'
  },
  {
    id: 'text-splitter',
    name: '文本分割工具',
    description: '按字符、单词、行或自定义分隔符分割文本',
    category: '文本处理',
    icon: Scissors,
    href: '/tools/text-splitter'
  },
  {
    id: 'whitespace-remover',
    name: '空白字符清理',
    description: '清理文本中的多余空格、制表符、换行等',
    category: '文本处理',
    icon: Eraser,
    href: '/tools/whitespace-remover'
  },
  {
    id: 'text-formatter',
    name: '文本格式化',
    description: '格式化文本的缩进、换行、段落间距等',
    category: '文本处理',
    icon: AlignLeft,
    href: '/tools/text-formatter'
  },
  {
    id: 'character-frequency',
    name: '字符频率统计',
    description: '分析文本中每个字符的出现频率和分布',
    category: '文本处理',
    icon: BarChart3,
    href: '/tools/character-frequency'
  },
  {
    id: 'text-diff',
    name: '文本差异对比',
    description: '对比两段文本的差异，高亮显示变化',
    category: '文本处理',
    icon: GitCompare,
    href: '/tools/text-diff'
  },

  // 新增生成器工具 (Stage 3)
  {
    id: 'lorem-ipsum-generator',
    name: 'Lorem Ipsum 生成器',
    description: '生成Lorem Ipsum占位文本，支持多种格式和自定义选项',
    category: '生成器',
    icon: FileText,
    href: '/tools/lorem-ipsum-generator'
  },
  {
    id: 'qr-code-generator',
    name: '二维码生成器',
    description: '生成各种内容的二维码，支持自定义样式和参数',
    category: '生成器',
    icon: Code,
    href: '/tools/qr-code-generator'
  },
  {
    id: 'random-string-generator',
    name: '随机字符串生成器',
    description: '生成自定义长度和字符集的随机字符串',
    category: '生成器',
    icon: Shuffle,
    href: '/tools/random-string-generator'
  },
  {
    id: 'hash-generator',
    name: '哈希值生成器',
    description: '生成文本的MD5、SHA-1、SHA-256、SHA-512等哈希值',
    category: '编程开发',
    icon: Key,
    href: '/tools/hash-generator'
  },

  // 新增实用工具 (Stage 3)
  {
    id: 'unit-converter',
    name: '单位转换工具',
    description: '支持长度、重量、温度、面积、体积等多种单位转换',
    category: '实用工具',
    icon: ArrowUpDown,
    href: '/tools/unit-converter'
  },
  {
    id: 'markdown-preview',
    name: 'Markdown 预览工具',
    description: '实时预览Markdown文档，支持多种主题和导出功能',
    category: '格式转换',
    icon: FileText,
    href: '/tools/markdown-preview'
  }
]

// 按分类组织工具
const categories = [
  {
    name: '文本处理',
    description: '文本格式化、验证和处理工具',
    tools: allTools.filter(tool => tool.category === '文本处理')
  },
  {
    name: '编程开发',
    description: '代码格式化、验证和开发辅助工具',
    tools: allTools.filter(tool => tool.category === '编程开发')
  },
  {
    name: '转换格式',
    description: '各种格式之间的转换工具',
    tools: allTools.filter(tool => tool.category === '转换格式')
  },
  {
    name: '生成器',
    description: '生成各种格式的数据和标识符',
    tools: allTools.filter(tool => tool.category === '生成器')
  },
  {
    name: '设计工具',
    description: '颜色、图像和设计相关工具',
    tools: allTools.filter(tool => tool.category === '设计工具')
  },
  {
    name: '实用工具',
    description: '日常开发和办公中的实用工具',
    tools: allTools.filter(tool => tool.category === '实用工具')
  }
].filter(category => category.tools.length > 0) // 只显示有工具的分类

export default function HomePage() {
  return (
    <div className="container mx-auto px-4 py-8">
      {/* Hero Section */}
      <section className="text-center py-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">
          DevBox - 开发者在线工具集
        </h1>
        <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
          一个面向全球开发者的现代化在线工具集，提供高效、安全、易用的开发工具
        </p>
        <div className="flex justify-center gap-4">
          <Button size="lg" asChild>
            <Link href="#tools">开始使用</Link>
          </Button>
          <Button variant="outline" size="lg" asChild>
            <Link href="/about">了解更多</Link>
          </Button>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          <div className="text-center p-6 bg-blue-50 rounded-lg">
            <div className="text-3xl font-bold text-blue-600 mb-2">{allTools.length}</div>
            <div className="text-blue-800 font-medium">可用工具</div>
          </div>
          <div className="text-center p-6 bg-green-50 rounded-lg">
            <div className="text-3xl font-bold text-green-600 mb-2">{categories.length}</div>
            <div className="text-green-800 font-medium">工具分类</div>
          </div>
          <div className="text-center p-6 bg-purple-50 rounded-lg">
            <div className="text-3xl font-bold text-purple-600 mb-2">100%</div>
            <div className="text-purple-800 font-medium">隐私保护</div>
          </div>
        </div>
      </section>

      {/* Tools by Category */}
      <section id="tools" className="py-8">
        <div className="space-y-12">
          {categories.map((category) => (
            <div key={category.name}>
              <div className="mb-6">
                <h2 className="text-2xl font-bold text-gray-900 mb-2">
                  {category.name}
                </h2>
                <p className="text-gray-600">
                  {category.description}
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {category.tools.map((tool) => (
                  <ToolCard key={tool.id} tool={tool} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Features Section */}
      <section className="py-12 bg-gray-50 rounded-lg">
        <div className="text-center mb-8">
          <h2 className="text-3xl font-bold text-gray-900 mb-4">
            为什么选择 DevBox？
          </h2>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
              <Search className="w-6 h-6 text-blue-600" />
            </div>
            <h3 className="text-xl font-semibold mb-2">隐私优先</h3>
            <p className="text-gray-600">
              所有数据在客户端处理，保护您的隐私安全
            </p>
          </div>
          
          <div className="text-center">
            <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
              <Code className="w-6 h-6 text-green-600" />
            </div>
            <h3 className="text-xl font-semibold mb-2">现代化设计</h3>
            <p className="text-gray-600">
              基于 Next.js 14 和 TailwindCSS 的现代化界面
            </p>
          </div>
          
          <div className="text-center">
            <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
              <Shuffle className="w-6 h-6 text-purple-600" />
            </div>
            <h3 className="text-xl font-semibold mb-2">高效便捷</h3>
            <p className="text-gray-600">
              即用即走，无需注册，专注于提升开发效率
            </p>
          </div>
        </div>
      </section>
    </div>
  )
}